﻿<div class="row-fluid page-content">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <div class="page-head-line location">
                    <span>位置：</span>
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li>信息维护</li>
                        <li>客户档案</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row cls-list">
            <div class="col-md-12">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <div class="form-group col-md-2">
                            <div class="input-group">
                                <span class="input-group-addon">姓名: </span>
                                <input name="Name" type="text" class="form-control query-Name" />
                            </div>
                        </div>
                        <div class="form-group col-md-2">
                            <div class="input-group">
                                <span class="input-group-addon">身份证: </span>
                                <input name="IdNo" type="text" class="form-control query-IdNo" />
                            </div>
                        </div>
                        <div class="form-group col-md-2">
                            <div class="input-group">
                                <span class="input-group-addon">电话: </span>
                                <input name="Tel" type="text" class="form-control query-Tel" />
                            </div>
                        </div>
                        <div class="form-group col-md-2">
                            <div class="input-group">
                                <span class="input-group-addon">联系人: </span>
                                <input name="Contact" type="text" class="form-control query-Contact" />
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <div class="input-group">
                                <button class="query btn btn-primary"><i class="fa fa-search fa-lg"></i>查 询</button>
                                <button class="add btn btn-default"><span class="add"></span>增 加</button>
                                <button class="delete btn btn-default"><span class="delete"></span>删 除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="customerViewTable" class="myTable"></table>
            </div>
        </div>
        <div class="row cls-edit" style="display:none;">
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">客户信息</h3>
                    </div>
                    <div class="panel-body">
                        <form id="editForm" action="">
                            <input class="Id" name="Id" type="hidden" />
                            <input class="cls-form-reset" type="reset" style="display:none;" />
                            <table>
                                <tr>
                                    <td class="title"><font color="red">*</font> 姓名：</td>
                                    <td class="content"><input name="Name" class="Name form-control" type="text" /></td>
                                    <td class="title"> 身份证：</td>
                                    <td class="content"><input name="IdNo" type="text" class="IdNo form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title">性别：</td>
                                    <td class="content">
                                        <select name="Gender" class="Gender form-control">
                                            <option>无</option>
                                            <option>男</option>
                                            <option>女</option>
                                        </select>
                                    </td>
                                    <td class="title">出生日期：</td>
                                    <td class="content"><input name="Birthday" type="text" class="Birthday form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title">电话：</td>
                                    <td class="content"><input name="Tel" type="text" class="Tel form-control" /></td>
                                    <td class="title">住址：</td>
                                    <td class="content"><input name="Addr" type="text" class="Addr form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title">婴儿性别：</td>
                                    <td class="content">
                                        <select name="BabyGender" class="BabyGender form-control">
                                            <option>无</option>
                                            <option>男</option>
                                            <option>女</option>
                                        </select>
                                    </td>
                                    <td class="title">婴儿体重：</td>
                                    <td class="content"><input name="BabyWeight" type="text" class="BabyWeight form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title">婴儿出生：</td>
                                    <td class="content"><input name="BabyBirth" type="text" class="BabyBirth form-control" /></td>
                                    <td class="title">联系人：</td>
                                    <td class="content"><input name="Contact" type="text" class="BabyContact form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title">联系人电话：</td>
                                    <td class="content"><input name="ContactTel" type="text" class="ContactTel form-control" /></td>
                                    <td class="title">联系人关系：</td>
                                    <td class="content"><input name="ContactRel" type="text" class="ContactRel form-control" /></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="panel-footer">
                        <button class="save btn btn-success"><i class="fa fa-save fa-lg"></i> 保 存</button>
                        <button class="cancel btn btn-danger"><i class="fa fa-close fa-lg"></i> 取 消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#customerViewTable').bootstrapTable({
            url: window._util.BASE_URL + '/Business/QueryCustomer',
            method: 'get',
            dataType: "json",
            cache: true,
            totalField: 'MaxRows',
            dataField: 'Items',
            queryParamsType: "Page",
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            singleSelect: true,
            pagination: true, //分页
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 20,                       //每页的记录行数（*）
            pageList: [20, 50, 100, 200, 500],        //可供选择的每页的行数（*）
            search: false, //显示搜索框
            sidePagination: "server", //服务端处理分页
            clickToSelect: true,                //是否启用点击选中行
            showRefresh: false,                  //是否显示刷新按钮
            queryParams: function (params) {
                params["Name"] = $("#toolbar .query-Name").val();
                params["IdNo"] = $("#toolbar .query-IdNo").val();
                params["Tel"] = $("#toolbar .query-Tel").val();
                params["Contact"] = $("#toolbar .query-Contact").val();
                return params;
            },
            columns: [
                {
                    checkbox: true,
                },
                {
                    field: 'Id',
                    title: '编号',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Name',
                    title: '姓名',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Gender',
                    title: '性别',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'IdNo',
                    title: '身份证',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Tel',
                    title: '电话',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Addr',
                    title: '住址',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Contact',
                    title: '联系人',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    hlign: 'center',
                    formatter: function (value, row, index) {
                        return '<button data-id="' + row.Id + '" class="edit btn btn-success"><i class="fa fa-edit fa-lg"></i> 编 辑</button>';
                    }
                }
            ]
        });
        //查询
        $("#toolbar .query").click(function () {
            $('#customerViewTable').bootstrapTable('refresh');
        });
        //添加
        $("#toolbar button.add").click(function (args) {
            //表单重置
            $('#page-inner .cls-list').hide();
            $('#editForm input.cls-form-reset').click();
            $("#editForm input.Id").val(0);
            $('#page-inner .cls-edit').show();
        });
        //编辑
        $("#customerViewTable tbody").click(function (event) {
            var element = $(event.target);
            if (element.is("button.edit")) {
                var id = element.data("id");
                $.ajax({
                    url: window._util.BASE_URL + "/Business/GetCustomer",
                    method: "GET",
                    dataType: "json",
                    data: "Id=" + id,
                    success: function (resp) {
                        if (resp != null) {
                            $("#editForm input.Id").val(resp.Id);
                            $("#editForm input.Name").val(resp.Name);
                            $("#editForm input.Tel").val(resp.Tel);
                            $("#editForm select.Gender").val(resp.Gender);
                            $("#editForm input.Birthday").val(resp.Birthday);
                            $("#editForm input.IdNo").val(resp.IdNo);
                            $("#editForm input.Addr").val(resp.Addr);
                            $("#editForm select.BabyGender").val(resp.BabyGender);
                            $("#editForm input.BabyWeight").val(resp.BabyWeight);
                            $("#editForm input.BabyBirth").val(resp.BabyBirth);
                            $("#editForm input.BabyContact").val(resp.Contact);
                            $("#editForm input.ContactTel").val(resp.ContactTel);
                            $("#editForm input.ContactRel").val(resp.ContactRel);
                            $("#editForm input.Note").val(resp.Note);

                            $('#page-inner .cls-list').hide();
                            $('#page-inner .cls-edit').show();
                        } else {
                            alert("获取数据出错");
                        }
                    }
                }).fail(function (H, G) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }
        });
        //删除
        $("#toolbar button.delete").click(function () {
            var selections = $('#customerViewTable').bootstrapTable('getSelections');
            if (selections != null && selections.length > 0) {
                var idArray = new Array();
                $.each(selections, function (ix, item) {
                    idArray.push(item.Id);
                });
                var jsonData = {
                    ids: idArray
                };
                $.ajax({
                    url: window._util.BASE_URL + "/Business/DeleteCustomers",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert("删除成功");
                            $('#customerViewTable').bootstrapTable('refresh');
                        } else {
                            alert("删除失败");
                        }
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }
        });
        //保存
        $(".cls-edit button.save").click(function () {
            $('#editForm').submit();
        });
        //取消
        $(".cls-edit button.cancel").click(function () {
            $('#page-inner .cls-edit').hide();
            $('#page-inner .cls-list').show();
        });
        //表单编辑校验
        var validate = $("#editForm").validate({
            debug: true,
            focusInvalid: false,
            onkeyup: false,
            submitHandler: function (form) {
                var jsonData = $(form).serializeObject();
                $.ajax({
                    url: window._util.BASE_URL + "/Business/CheckCustomer",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    async: true,
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (F) {
                        if (!F.Result) {
                            alert(F.Message);
                            return;
                        }
                        $.ajax({
                            url: window._util.BASE_URL + "/Business/EditCustomer",
                            method: "POST",
                            contentType: "application/json;charset=UTF-8",
                            async: true,
                            dataType: "json",
                            data: JSON.stringify(jsonData),
                            success: function (resp) {
                                if (resp != null && resp.Result) {
                                    alert(resp.Message);
                                    $('#customerViewTable').bootstrapTable('refresh');
                                    $('#page-inner .cls-edit').hide();
                                    $('#page-inner .cls-list').show();
                                } else {
                                    alert("保存失败");
                                }
                            }
                        });
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
                return false;
            },

            rules: {
                Name: {
                    required: true
                },
                IdNo: {
                    //required: true,
                    identityCodeValid: true
                }
            },
            messages: {
                Name: {
                    required: "姓名不能为空"
                },
                IdNo: {
                    //required: "身份证不能为空"
                }
            }

        });

    });
</script>
